<template>
  <div class="addOrEditQueueBox">
    <breadcrumb :titleArr="titleArr" @back="breadcrumbBack" class="bread-crumb"></breadcrumb>
    <div class="queueBoxCont">
      <el-form class="m7-form baseInfo" :rules="baseInfoRule"
        size="mini" :model="baseInfoFrom"
        ref="form" label-position="top">
        <el-form-item label="满意度名称" prop="name" :rules="{
      required: true, message: '满意度名称不能为空', trigger: 'blur'
    }">
          <el-input v-model.trim="baseInfoFrom.name" :maxlength="50" placeholder="请输入满意度名称" size="mini"></el-input>
        </el-form-item>
        <div><label class="el-form-item__label cust__label">满意度问题</label></div>
        <div class="question" v-for="(item, index) in baseInfoFrom.questionList" :key="index">
          <div class="quest-title">问题{{index + 1}}
            <i class="V7_iconfont V7_iconV7tubiao_shanchutong fr oprate" @click.stop="delQuestion(index)"></i>
          </div>
          <div class="question-content">
            <el-form-item  class="quest-item" :rules="{ required: true, message: '标题不能为空', trigger: 'blur' }" :prop="'questionList.' + index + '.title'" :key="index">
              <div class="quest-item"><label class="el-form-item__label cust__label">标题：</label><el-input v-model="item.title"></el-input></div>
            </el-form-item>
            <div class="quest-item">
              <label class="el-form-item__label">问题类型：</label>
              <el-radio-group v-model="item.type" style="line-height: 32px;" @change="changeType(item)">
                <el-radio :label="1">评分</el-radio>
                <el-radio :label="2">单选</el-radio>
                <el-radio :label="3">多选</el-radio>
              </el-radio-group>
            </div>
            <div v-if="item.type !== 1" class="quest-item"><label class="el-form-item__label">添加选项：</label>
             <div>
               <div class="options-item" v-for="opt in item.chooseValueList" :key="opt.key">
                 <el-input size="small" v-model="opt.value" class="input" maxlength="25" @blur="blur(opt, item)"></el-input>
					<i class="V7_iconfont V7_iconV7tubiao_guanbi pointer" @click="deleteItem(index, item.chooseValueList)"></i>
               </div>
               <div @click.stop="addFields(item)" class="add-btn">添加</div>
             </div>
            </div>
            <div v-if="item.type === 1">
              <div v-for="(star, index) in item.chooseValueList" :key="star.key" class="star">
                <div style="width: 80px;">{{starMap[index].name}}</div>
                <div style="width: 140px;">
                  <i class="V7_iconfont V7_iconV7tubiao_biaoxingxuanzhong" v-for="icon in starMap[index].value" :key="icon"></i>
                </div>
                <el-input class="input-w" v-model.trim="star.value" placeholder="请输入内容" size="mini"></el-input>
              </div>
            </div>
          </div>
        </div>
        <el-button size="mini" type="primary" style="margin-bottom: 12px" @click="addQuestion(item)">添加问题</el-button>
        <el-form-item label="其他问题" prop="otherQuestion">
          <div class="quest-item" style="align-items: center;">
            <label class="el-form-item__label" style="padding-bottom: 0px;">标题：</label>
            <el-input style="width: 500px" @blur="changeOthertitle" v-model.trim="baseInfoFrom.otherQuestion" maxlength="25" placeholder="请输入内容" size="mini"></el-input>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="more-btn">
      <el-button class="cancel" size="mini" @click="cancelFun">取消</el-button>
      <el-button size="mini" type="primary" @click="saveFun">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { commonAction } from '@/utils/common'
interface ArrayObj {
  props: {}
}
@Component({
  name: 'addOrEditSatisf',
  components: {
    breadcrumb
  }
})
export default class AddOrEditQueue extends Vue {
  [x: string]: any
  @Prop({ default: [] }) private titleArr!: any

  private starMap = {
    0: {
      name: '五星',
      value: 5
    },
    1: {
      name: '四星',
      value: 4
    },
    2: {
      name: '三星',
      value: 3
    },
    3: {
      name: '二星',
      value: 2
    },
    4: {
      name: '一星',
      value: 1
    }
  }

  private baseInfoRule = {
    questionList: [{ required: true, trigger: 'change', message: '请添加问题' }]
  }

  private baseInfoFrom = {
    questionList: [] as any,
    name: '',
    otherQuestion: ''
  }

  private id = ''

  private delQuestion (index: number) {
    this.baseInfoFrom.questionList.splice(index, 1)
  }

  private changeOthertitle () {
    if (!this.baseInfoFrom.otherQuestion) {
      this.baseInfoFrom.otherQuestion = '其他问题'
    }
  }

  private cancelFun () {
    this.$emit('cancelFun')
  }

  private deleteItem (index, row) {
    row.splice(index, 1)
  }

  private blur (item, row) {
    if (!item.value) {
      item.value = '选项' + item.key;
    } else if (
      row.chooseValueList.find((one) => {
        return one !== item && one.value === item.value;
      })
    ) {
      item.value = '选项' + item.key;
      this.$message.error('选项名重复');
    }
  }

  private addFields (row: any) {
    const item = { value: '选项0', key: 1 };
    const options = row.chooseValueList;
    const maxValue = Math.max(0, ...options.map((item1) => item1.key));
    item.key = maxValue + 1;
    item.value = `选项${item.key}`;
    row.chooseValueList.push(item);
  }

  private changeType (item) {
    if (item.type === 1) {
      item.chooseValueList = [
        { key: 5, value: '非常满意' },
        { key: 4, value: '很满意' },
        { key: 3, value: '一般' },
        { key: 2, value: '不满意' },
        { key: 1, value: '非常不满意' }
      ]
    } else {
      item.chooseValueList = []
    }
  }

  private addQuestion (item: any) {
    const arr = [
      { key: 5, value: '非常满意' },
      { key: 4, value: '很满意' },
      { key: 3, value: '一般' },
      { key: 2, value: '不满意' },
      { key: 1, value: '非常不满意' }
    ]
    this.baseInfoFrom.questionList.push({
      title: '',
      type: 1,
      chooseValueList: arr
    })
  }

  private breadcrumbBack () {
    this.$emit('pageBack')
  }

  public setData (obj?: any) {
    if (obj) {
      const { otherQuestion, questionList = [], name } = obj
      this.id = obj.id
      this.baseInfoFrom = {
        questionList,
        name,
        otherQuestion: otherQuestion.title
      }
    } else {
      this.baseInfoFrom = {
        questionList: [] as any,
        name: '',
        otherQuestion: ''
      }
    }
  }

  private saveFun () {
    if (!this.baseInfoFrom.questionList.length) {
      this.$message.success('满意度问题不能为空!')
      return false
    }
    const { name, questionList } = this.baseInfoFrom
    const params: any = {
      otherQuestion: {
        key: 1,
        title: this.baseInfoFrom.otherQuestion
      },
      name,
      questionList
    }
    if (this.id) {
      params.id = this.id
    }
    const formRef = (this.$refs as any).form
    formRef.validate(valide => {
      if (valide) {
        commonAction({ url: `/server-work/action/satisfaction/template/${this.id ? 'update' : 'insert'}`, method: 'post', data: params }).then(res => {
          if (res.success) {
            this.$message.success('成功！')
            this.$emit('saveFun', true)
          }
        })
      }
    })
  }

  private mounted () {
    this.$nextTick(() => {
      const dom: any = document.getElementsByClassName('el-transfer-panel__body')[1]
      if (dom) {
        dom.classList.add('rightContent')
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .input-w
    width: 200px
  .star
    display: flex
    margin-bottom: 10px;
    align-items: center;
  .V7_iconfont
    margin-right: 12px
    color: rgb(255, 153, 0);
  .question
    border: 1px solid #e8ecf8;
    border-radius: 4px;
    margin-bottom: 12px;
    .add-btn
      color: #008CEE;
      font-size: 12px;
      cursor: pointer;
      line-height: 32px
    .options-item
      display: flex;
      margin-bottom: 8px;
      align-items: center;
    .question-content
      padding: 12px
    .V7_iconV7tubiao_guanbi
      margin-left: 10px
      color: #FC6C5C;
    .quest-title
      padding: 12px;
      border-bottom: 1px solid #e8ecf8;
      font-weight: 500;
  .quest-item
    display: flex;
    margin-bottom: 12px;
    .el-form-item__label
      line-height: 32px;
      min-width: 80px;
      padding: 0;
  .V7_iconV7tubiao_shanchutong
    color: #FC6C5C;
    cursor pointer
  .cust__label::before
    content: '*';
    color: #FC6C5C;
    margin-right: 4px;
  .addOrEditQueueBox
      border 1px solid $border-main
      // padding 8px 16px 62px 16px
      border-radius 10px
      height calc(100vh - 86px)
      overflow auto
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    .bread-crumb
      // margin 10px 0 20px 0
    .queueBoxCont
      margin 24px
      margin-bottom 60px
    .title
      font-size 14px
      color $fc-gray2
      font-weight 600
    .more-btn
      bottom -1px
      right 1px
      width 99%
      height 60px
      padding 0 16px
      line-height 48px
      text-align right
      position absolute
      background #fff
      z-index 20
      .cancel
        margin-right 10px
</style>
